<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="icon" href="images/favicon.png" type="image/png">

  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
  <!-- build:css -->
  <link rel="stylesheet" href="node_modules/dropzone/dist/dropzone.css">
  <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.css">
  <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/solid.css">
  <link rel="stylesheet" href="css/swupdate.css">
  <!-- endbuild -->

  <!-- build:js -->
  <script src="node_modules/jquery/dist/jquery.js"></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
  <script src="node_modules/dropzone/dist/dropzone.js"></script>
  <!-- endbuild -->
  <script src="js/swupdate.js"></script>

  <title>SWUpdate - Software Update for Embedded Systems</title>
</head>

<body>
  <!-- Navigation Header -->
  <nav class="navbar sticky-top navbar-expand-sm navbar-dark bg-primary">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="d-inline-block align-top" src="images/logo.png" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a id="swu-restart" class="nav-link" href="#"><i class="fas fa-sync"></i> Restart System</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Use Bootstrap Grid Container -->
  <div class="container">
    <!-- Header -->
    <div class="row my-3">
      <div class="col">
        <div class="card opacity-75">
          <div class="card-header pb-0">
            <h1 class="display-4"><span class="text-primary">SW</span>Update</h1>
            <p class="lead">Software update for embedded systems</p>
            <p>Upload a software image below, or restart the system at the top right corner.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="row my-3">
      <div class="col">
        <div class="card opacity-75">
          <div class="card-header pb-0">
            <h5><i class="fas fa-wrench"></i> Software Update</h5>
          </div>
          <div class="card-body">
            <!-- Dropzone Button for drag&drop files -->
            <form class="dropzone border rounded mb-3" id="dropzone" action="./upload" method="post" enctype="multipart/form-data">
              <div class="dz-default dz-message">
                <span class="dz-message">Click here, or drag and drop a software update image file to this area.</span>
              </div>
            </form>

            <!-- Status -->
            <div id="swu-idle" class="alert alert-secondary">
              <i class="fas fa-info-circle"></i> Update not started.
            </div>
            <div id="swu-run" class="alert alert-warning" style="display: none;">
              <i class="fas fa-exclamation-triangle"></i>
              Updating may take a few minutes, please don't turn off the power.
            </div>
            <div id="swu-success" class="alert alert-success" style="display: none;">
              <i class="fas fa-check-circle"></i> Updated successfully.
            </div>
            <div id="swu-failure" class="alert alert-danger" style="display: none;">
              <i class="fas fa-times-circle"></i> Update failed.
            </div>
            <div id="swu-done" class="alert alert-info" style="display: none;">
              <i class="fas fa-sync"></i> Restarting system.
            </div>

            <!-- Progress -->
            <i id="swu-progress-spinner" class="spinner-border invisible" role="status"></i>
            <strong id="swu-progress-run" style="display: none;">Updating:</strong>
            <span id="swu-progress-name"></span>
            <span id="swu-progress-value" class="float-right"></span>
            <div class="progress" role="progressbar">
              <div id="swu-progress-bar" class="progress-bar progress-bar-striped" style="height: 1.5rem"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Messages -->
    <div class="row my-3">
      <div class="col">
        <div class="card opacity-75">
          <div class="card-header" id="headingMessages">
            <a class="h5 collapsed" data-bs-toggle="collapse" data-bs-target="#collapseMessages" aria-expanded="false" aria-controls="collapseMessages">
              <i class="fas"></i> Messages
            </a>
          </div>
          <div id="collapseMessages" class="collapse" aria-labelledby="headingMessages">
            <div class="card-body" id="messages"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Restart -->
    <div id="swu-restart-modal" class="modal fade" tabindex="-1">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-body">
            <i class="spinner-border" role="status"></i>
            <h5>The system will restart. Please be patient, as restarting takes about one minute.</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
